import React, { forwardRef, useState, useEffect } from 'react'
import { Form, Input, Select } from 'antd'
const UserForm = forwardRef((props: any, ref: any) => {
  const [isDisable, setisDsiabeld] = useState(false)
  useEffect(() => {
    setisDsiabeld(props.isDisable)
  }, [props.isDisable])
  let roleObj: any = {
    1: 'superdmin',
    2: 'admin',
    3: 'editor'
  }
  const {
    role: { id },
    username,
    region
  } = JSON.parse(localStorage.getItem('token') || '')
  const checkRegionFun = (item: any) => {
    if (props.isUpdate) {
      //更新逻辑
      if (roleObj[id] === 'superdmin') {
        return false
      } else {
        return true
      }
    } else {
      //新建
      if (roleObj[id] === 'superdmin') {
        return false
      } else {
        return item.value !== region
      }
    }
  }

  const checkRoleFun = (item: any) => {
    if (props.isUpdate) {
      //更新逻辑
      if (roleObj[id] === 'superdmin') {
        return false
      } else {
        return true
      }
    } else {
      //新建
      if (roleObj[id] === 'superdmin') {
        return false
      } else {
        return roleObj[item.id] !== 'editor'
      }
    }
  }
  return (
    <Form ref={ref} layout="vertical" name="form_in_modal" initialValues={{ username: 'ymx' }}>
      <Form.Item
        name="username"
        label="用户名"
        rules={[{ required: true, message: 'Please input the title of collection!' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="password"
        label="密码"
        rules={[{ required: true, message: 'Please input the title of collection!' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="region"
        label="区域"
        rules={isDisable ? [] : [{ required: true, message: 'Please input the title of collection!' }]}
      >
        <Select
          style={{ width: '100%' }}
          options={[
            ...props.regionList.map((item: any) => {
              return {
                ...item,
                disabled: checkRegionFun(item)
              }
            })
          ]}
          disabled={isDisable}
        />
      </Form.Item>
      <Form.Item
        name="roleId"
        label="角色"
        rules={[{ required: true, message: 'Please input the title of collection!' }]}
      >
        <Select
          style={{ width: '100%' }}
          options={[
            ...props.roleList.map((item: any) => {
              return {
                ...item,
                disabled: checkRoleFun(item)
              }
            })
          ]}
          fieldNames={{ label: 'roleName', value: 'id' }}
          onSelect={(value: any) => {
            if (value === 1) {
              setisDsiabeld(true)
              ref.current.setFieldsValue({
                region: ''
              })
            } else {
              setisDsiabeld(false)
            }
          }}
        />
      </Form.Item>
    </Form>
  )
})
export default UserForm
